<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Station</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<script src="/js/datapicker/WdatePicker.js" type="text/javascript"></script>
<script src="/js/vuejs/vue.js" type="text/javascript"></script>
<script src="/js/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<!-- <input id="start_date" type="text" name="startDate" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})" /><br /> -->
	<div id="station_app">
		<table class="pure-table pure-table-bordered">
			<thead>
				<tr>
					<th>#</th>
					<th>lineId</th>
					<th>stageId</th>
					<!-- <th>stageseq</th> -->
					<!-- <th>stageIs</th> -->
					<th>stageName</th>
					<th>stageKey</th>
					<th>gisKey</th>
					<th>stageDisc</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in items">
					<td>{{index+1}}</td>
					<td>{{item.lineId}}</td>
					<td>{{item.stageId}}</td>
					<!-- <td>{{item.stageseq}}</td> -->
					<!-- <td>{{item.stageIs}}</td> -->
					<td>{{item.stageName}}</td>
					<td>{{item.stageKey}}</td>
					<td>{{item.gisKey}}</td>
					<td>{{item.stageDisc}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el: "#station_app",
		data: {
			site: "hello World!",
			items: [],
			url:'api/stations?lineId=2'
		},
		methods:{
			getData: function(){
 				var _self = this;
				$.ajax({
					type: 'GET',
					url: '/api/stations?lineId=2',
					success: function(data){
						_self.items = data;
					}
				});
			}
		}
	});
	vm.getData();
</script>
</html>